<template>
  <div>
    <el-row class="source">
      <draggable :list="customerSource1.source" :options="{group:'people'}"
                 @start="drag=true">
      <el-col class="drag-div" :span="24" v-for="(item, index) in customerSource1.source" :key="index">
        <el-col :span="21"><el-input v-model.trim="item.name" size="mini" :key="index" class=""></el-input></el-col>
        <el-col :span="2" style="padding-top: 6px" v-if="index === 0"><span class=""><i class="el-icon-plus el-icon--right green-color" @click="addOptions(customerSource1.source.length)"></i></span></el-col>
        <el-col :span="2" style="padding-top: 6px" v-if="index !== 0"><span class=""><i class="iconfont icon-zuixiaohua el-icon--right colorred" @click="delOptions(index)"></i></span></el-col>
      </el-col>
      </draggable>
    </el-row>
    <div class="dialog-footer footer">
      <el-button @click.stop="cannelCustomSource" class='primary_btn'>{{$t('public.cancel')}}</el-button>
      <el-button type="primary" @click="saveCustomSource" class='primary_btn'>{{$t('public.confirm')}}</el-button>
    </div>
  </div>
</template>
<script>
  import { deepClone } from '@/utils/m7Utils.js'
  import draggable from 'vuedraggable'
  export default {
    name: 'CustomerSourceDialog',
    data () {
      return {
        customerSource1: {
          source: [],
          id: ''
        }
      }
    },
    props: {
      customerSource: Object
    },
    watch: {
      customerSource () {
        if (this.customerSource.source.length !== 0) {
          this.customerSource1 = deepClone(this.customerSource)
        } else {
          this.customerSource1._id = this.customerSource._id
          this.customerSource1.source.push({name: '', key: ''})
        }
        console.log(this.customerSource1)
      }
    },
    computed: {
    },
    methods: {
      cannelCustomSource () {
        this.$emit('customSource', {source: this.customerSource.source, flag: false})
      },
      saveCustomSource () {
        let i = 0
        let source = []
        for (i; i < this.customerSource1.source.length; i++) {
          if (this.customerSource1.source[i].name !== '') {
            source.push(this.customerSource1.source[i])
          }
        }
        this.$store.dispatch('editSource', {id: this.customerSource1._id, source: source}).then(resp => {
          if (resp.success) {
            this.$message.success(this.$t('userInfo.editSuccess'))
            this.$emit('customSource', {source: source, flag: false})
          } else {
            this.$message.error(this.$t('userInfo.editFail'))
          }
        })
      },
      addOptions (index) {
        this.customerSource1.source.push({
          name: '',
          key: ''
        })
//        this.$set(this.customerSource1, index, '')
      },
      delOptions (index) {
        this.customerSource1.source.splice(index, 1)
      }
    },
    components: {
      draggable
    },
    beforeMount () {
      if (this.customerSource.source.length !== 0) {
        this.customerSource1 = deepClone(this.customerSource)
      } else {
        this.customerSource1._id = this.customerSource._id
        this.customerSource1.source.push({name: '', key: ''})
      }
      console.log(this.customerSource1)
    }
  }
</script>
<style lang="stylus" scoped>
  @import "../../../../../assets/common.styl"
  .source
     margin-bottom 10px
     overflow-y: auto
     height: calc(325px - 65px);
  .green-color
    color $c-main
    cursor pointer
  .colorred
    color $c-pink
    cursor pointer
  .footer
    text-align: center;
    margin-top: 10px;
    position: absolute;
    right: 10px;
    left: 10px;
    bottom: 10px;
    border-radius: 4px;
    margin: 0;
    padding: 4px 0;
    background: #fff;
    z-index: 6;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  .drag-div
    cursor move
    margin-bottom 10px
  .drag-div:before
    color $cf-gray4
    float: left
    content: " "
    width: 3px
    height: 18px
    border: 1px dotted #a6a6a6
    margin-right: 5px
    border-top: none
    margin-top 6px
    border-bottom: none
</style>

